<template>
  <div class="header">
    <div class="logo">
      <img
        :src="
          lang === 'en'
            ? require('@/assets/images/sotenLogo_en.svg')
            : require('@/assets/images/sotenLogo.png')
        "
        alt="logo"
        @click="goHome"
      />
    </div>
    <div class="navbar">
      <div v-for="item in menus" :key="item.id" class="navbar-in">
        <div class="navbar-title" :class="{ hidden: !item.children }" @click="toPage(item)">
          <span>{{ item[lang] }}</span>
        </div>
        <div v-if="show" class="subnav">
          <div class="subnav-in">
            <!-- 解决方案 -->
            <template v-if="item.path === '/solution-list'">
              <div class="solut-fl">
                <div
                  v-for="(child, index) in item.children"
                  :key="child.id"
                  :class="{ selected: currentSoluteIndex === index }"
                  @click="() => handleSolutChange(index)"
                >
                  {{ child[lang] }}
                </div>
              </div>
              <div class="solut-fr">
                <h1>{{ item.children?.[currentSoluteIndex]?.[`title${capitalizeLang}`] }}</h1>
                <p>
                  {{ item.children?.[currentSoluteIndex]?.[`subtitle${capitalizeLang}`] }}
                </p>
                <div v-if="item.children?.[currentSoluteIndex]?.children.length" class="solut-row">
                  <img
                    src="@/assets/images/index/icon-pre.png"
                    alt="pre"
                    @click="scrollTo('pre')"
                  />
                  <div ref="solutScroll" class="solut-row-ct">
                    <div
                      v-for="solute in item.children[currentSoluteIndex].children"
                      :key="solute.id"
                      class="solut-col"
                      :style="{
                        backgroundImage: `url(${solute.coverImage})`,
                      }"
                      @click="toPage(solute)"
                    >
                      <!-- <img :src="solute.coverImage" alt="" /> -->
                      <p>{{ solute[`title${capitalizeLang}`] }}</p>
                    </div>
                  </div>
                  <img
                    src="@/assets/images/index/icon-next.png"
                    alt="next"
                    @click="scrollTo('next')"
                  />
                </div>
                <span v-else class="empty"> {{ lang === 'zh' ? '暂无案例' : 'empty' }} </span>
              </div>
            </template>
            <!-- 产品列表 -->
            <template v-if="item.path === '/product'">
              <a
                v-for="(child, index) in item.children"
                :key="child.id"
                :class="{ selected: currentProdtIndex === index }"
                @click="handleProdtChange(index)"
              >
                {{ child[lang] }}
              </a>
              <img
                key="pre"
                src="@/assets/images/index/icon-pre.png"
                alt="pre"
                class="pre"
                @click="scrollProductTo('pre')"
              />
              <img
                key="next"
                src="@/assets/images/index/icon-next.png"
                alt="next"
                class="next"
                @click="scrollProductTo('next')"
              />
              <div
                v-if="item.children?.[currentProdtIndex]?.children?.length"
                ref="productScroll"
                class="product"
              >
                <div
                  v-for="prodt in item.children[currentProdtIndex].children"
                  :key="prodt.id"
                  class="p-item"
                  @click="toPage(prodt)"
                >
                  <img :src="prodt.coverImage" alt="" />
                  <p class="ft16">{{ prodt[`title${capitalizeLang}`] }}</p>
                  <p class="ft14">{{ prodt[`subtitle${capitalizeLang}`] }}</p>
                </div>
              </div>
              <span v-else class="empty"> {{ lang === 'zh' ? '暂无案例' : 'empty' }} </span>
            </template>
            <!-- 其他 -->
            <template v-if="item.children && !['/solution-list', '/product'].includes(item.path)">
              <a v-for="child in item.children" :key="child.id" @click="toPage(child)">
                {{ child[lang] }}
              </a>
            </template>
          </div>
          <div v-if="item.path === '/product'" class="more" @click="toPage({ path: '/product' })">
            {{ lang === 'zh' ? '查看全部产品' : 'See all products' }} >
          </div>
        </div>
      </div>
    </div>
    <div class="h-fr">
      <el-input v-model="keyword" :placeholder="$t('common.input')" @keyup.enter.native="toSearch">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="toSearch"></i>
      </el-input>
      <span class="lang-switcher">
        <nuxt-link
          v-for="(locale, i) in showLocales"
          :key="i"
          :to="switchLocalePath(locale.code)"
          :class="{ active: locale.code === $i18n.locale }"
        >
          <span @click="handleChangeLang(locale.code)">{{ locale.iso }}</span>
        </nuxt-link>
      </span>
      <img src="@/assets/images/head.png" />
      <el-dropdown v-if="userInfo.name" trigger="click" @command="handleCommand">
        <span class="cursor-pointer el-dropdown-link">
          &nbsp;{{ userInfo.name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">{{ $t('login.signOut') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <template v-else>
        <span class="cursor-pointer" @click="handleShowDialog('registered')">
          &nbsp;{{ $t('index.register') }}
        </span>
        <span>/</span>
        <span class="cursor-pointer" @click="handleShowDialog('login')">{{
          $t('index.loginin')
        }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

import { INDEX_PATH } from '@/const/platform'

export default {
  data() {
    return {
      isCollapse: false,
      selected: {},
      keyword: '',
      currentSoluteIndex: 0,
      currentProdtIndex: 0,
      show: true,
      timer: null,
    }
  },
  computed: {
    ...mapState(['menus', 'lang', 'userInfo']),
    ...mapGetters(['capitalizeLang']),
    path() {
      return this.$route.path
    },
    showLocales() {
      return this.$i18n.locales
    },
  },
  methods: {
    goHome() {
      this.isCollapse = false
      this.$router.push(INDEX_PATH)
    },
    async toPage(item) {
      if (
        (item.children && item.path !== '/solution-list') ||
        this.$route.path.includes(item.path)
      ) {
        return
      }

      this.show = false
      this.$router.push({
        path: item.path,
      })

      this.timer = setTimeout(() => {
        this.show = true
      }, 200)
    },
    toSearch() {
      if (this.$route.path.includes('/search')) {
        this.keyword = ''
        return
      }
      this.$router.push({
        path: '/search',
        query: {
          keyword: this.keyword,
        },
      })
      this.keyword = ''
    },
    handleChangeLang(lang) {
      this.$store.commit('update', {
        lang,
      })
      this.$cookies.set('lang', lang)
    },
    handleSolutChange(index) {
      this.currentSoluteIndex = index
    },
    handleProdtChange(index) {
      this.currentProdtIndex = index
    },
    handleShowDialog(type) {
      this.$emit('show', type)
    },
    handleCommand() {
      this.$store.commit('update', {
        userInfo: '',
        token: '',
      })
      this.$cookies.set('userInfo', '')
      this.$message.success(this.$t('login.logioutnSuccess'))
    },
    scrollTo(type) {
      const scrollElement = this.$refs.solutScroll[0] // 或者使用 document.body，根据实际情况选择
      const animationDuration = 300 // 动画持续时间，以毫秒为单位
      const xLength = 50 // 滚动距离

      // 使用 requestAnimationFrame 实现动画效果
      function scrollToTopAnimated(timestamp) {
        const currentTime = Date.now()
        const progress = Math.min(1, (currentTime - startTime) / animationDuration)

        const startingXOffset = scrollElement.scrollLeft
        if (type === 'pre') {
          scrollElement.scrollLeft = startingXOffset - progress * xLength
        } else {
          scrollElement.scrollLeft = startingXOffset + progress * xLength
        }
        if (progress < 1) {
          requestAnimationFrame(scrollToTopAnimated)
        }
      }

      const startTime = Date.now()

      requestAnimationFrame(scrollToTopAnimated)
    },
    scrollProductTo(type) {
      const scrollElement = this.$refs.productScroll[0] // 或者使用 document.body，根据实际情况选择
      const animationDuration = 300 // 动画持续时间，以毫秒为单位
      const xLength = 50 // 滚动距离

      // 使用 requestAnimationFrame 实现动画效果
      function scrollToTopAnimated(timestamp) {
        const currentTime = Date.now()
        const progress = Math.min(1, (currentTime - startTime) / animationDuration)

        const startingXOffset = scrollElement.scrollLeft
        if (type === 'pre') {
          scrollElement.scrollLeft = startingXOffset - progress * xLength
        } else {
          scrollElement.scrollLeft = startingXOffset + progress * xLength
        }
        if (progress < 1) {
          requestAnimationFrame(scrollToTopAnimated)
        }
      }

      const startTime = Date.now()

      requestAnimationFrame(scrollToTopAnimated)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.header {
  .height(100);

  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 21;

  .logo {
    .width(236);
    .pd(25, 0, 0, 0);

    height: 100%;
    background-color: #0261bc;

    img {
      .height(50);

      margin: 0 auto;
      display: block;
      cursor: pointer;
    }
  }

  .navbar {
    display: flex;
    flex: 1;
    height: 100%;
    .ft(18);
    .pd(0, 0, 0, 114);

    .navbar-in {
      .width(112);
      .mg(0, 0, 0, 10);

      height: 100%;
      text-align: center;
      align-items: center;
      display: flex;

      &:hover {
        .navbar-title {
          &::before {
            .top(20);

            transform: rotate(45deg);
          }

          span {
            &::before {
              right: 0;
              left: 0;
            }
          }
        }

        .subnav {
          max-height: calc(100vh - 300px);
        }
      }

      .navbar-title {
        .pd(8, 16, 8 ,0);

        position: relative;

        &.hidden {
          &::before {
            display: none;
          }
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          .width(8);
          .height(8);
          .top(16);

          border-radius: 1px;
          border-left: 2px solid #898989;
          border-top: 2px solid #898989;
          right: 0;
          transform: rotate(225deg);
          transform-origin: center;
          transition: all 0.5s ease;
        }

        span {
          position: relative;
          .pd(8, 0, 8 ,0);

          cursor: pointer;

          &::before {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            right: 50%;
            left: 50%;
            height: 4px;
            background: #005cb9;
            height: 4px;
            transition: all 0.5s ease;
          }
        }
      }

      .subnav {
        .top(100);

        position: absolute;
        background: #fff;
        max-height: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        transition: all 0.5s ease;
        z-index: 21;

        .subnav-in {
          .width(1200);

          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          position: relative;

          & > a {
            .pd(25, 0, 25, 0);
            .mg(0, 0, 0, 50);

            color: #333;

            &:hover {
              color: #0762cb;
            }

            &.selected {
              color: #0762cb;
            }
          }

          .empty {
            width: 100%;
            font-size: 13px;
            line-height: 36px;
            display: block;
            margin: 20px;
            color: #666;
          }
        }

        .more {
          .lineH(72);
          .height(72);
          .ft(18);

          text-align: center;
          font-weight: 500;
          color: #333;
          border-top: 1px solid #f6f4f4;
          cursor: pointer;
        }

        .solut-fl {
          .width(260);
          .mg(50, 0, 50, 0);
          .pd(0, 10, 0, 0);
          .ft(18);

          text-align: left;
          font-weight: 500;
          border-right: 1px solid #f6f4f4;

          & > div {
            .mg(0, 20, 16, 0);

            display: inline-block;
            cursor: pointer;
            border-bottom: 2px solid #fff;

            &.selected {
              border-bottom: 2px solid #005cb9;
            }
          }
        }

        .solut-fr {
          flex: 1;
          overflow: hidden;
          text-align: left;
          .mg(50, 0, 50, 0);
          .pd(0, 0, 0, 50);

          .empty {
            font-size: 13px;
            line-height: 36px;
            display: inline-block;
            margin-top: 20px;
            color: #666;
          }

          h1 {
            .ft(20);
            .lineH(20);
            .mg(0, 0, 10, 0);

            color: #0a101e;
          }

          p {
            .ft(16);
            .lineH(20);

            color: #888;
          }

          .solut-row {
            display: flex;
            align-items: center;
            .mg(25, 0, 0, 0);

            img {
              .width(22);
              .height(22);

              cursor: pointer;
            }

            .solut-row-ct {
              .mg(0, 20, 0, 20);

              flex: 1;
              display: flex;
              overflow-x: auto;

              .solut-col {
                .flex(180);
                .height(140);
                .mg(0, 0, 0, 40);

                background-size: cover;
                cursor: pointer;
                position: relative;
                border-radius: 5px;

                &:nth-child(1) {
                  margin: 0;
                }

                p {
                  width: 100%;
                  .pd(6, 4, 6, 4);

                  position: absolute;
                  bottom: 0;
                  text-align: center;
                  color: #fff;
                  background-color: rgba(10, 16, 30, 0.6);
                }
              }
            }
          }
        }

        .product {
          .maxWidth(1200);
          .pd(50, 0, 50, 0);

          flex: 0 0 62.5vw;
          display: flex;
          overflow: auto;

          .p-item {
            text-align: center;
            cursor: pointer;
            .mg(0, 60, 0, 0);

            img {
              .height(120);

              transition: 0.3s all linear;

              &:hover {
                transform: scale(1.07);
              }
            }

            .ft16 {
              .ft(16);

              color: #333;
              font-weight: bold;
            }

            .ft14 {
              .ft(14);

              font-weight: 500;
              color: #777;
            }
          }
        }

        .pre {
          .width(22);
          .height(22);
          .mg(0, 0, 0, -30);

          cursor: pointer;
          position: absolute;
          top: 50%;
          z-index: 19;
        }

        .next {
          .width(22);
          .height(22);
          .mg(0, -30, 0, 0);

          cursor: pointer;
          position: absolute;
          right: 0;
          top: 50%;
          z-index: 19;
        }
      }
    }
  }

  .h-fr {
    .pd(0, 60, 0, 36);
    .ft(18);

    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    color: #333;

    &::after {
      content: '';
      width: 1px;
      .height(18);
      .top(42);

      background: #cad7e0;
      display: block;
      left: 0;
      position: absolute;
    }

    :deep(.el-input) {
      .width(220);
      .height(30);
      .lineH(30);

      border: none;

      .el-input__inner {
        background: #f6f4f4;
        border-radius: 15px;
        border: none;
        .ft(14);
        .height(30);
        .lineH(30);
      }

      .el-input__icon {
        .lineH(30);
        .ft(18);

        cursor: pointer;
      }
    }

    .lang-switcher {
      .width(62);
      .height(26);
      .mg(0, 30, 0, 95);

      background: #2c3544;
      border-radius: 13px;
      text-align: center;

      a {
        .ft(16);
        .lineH(20);
        .pd(0, 3, 0, 3);

        color: #616872;
        text-align: center;

        &.active {
          color: #fff;
        }
      }
    }

    img {
      .width(26);
      .height(26);
    }

    .cursor-pointer {
      cursor: pointer;

      &:hover {
        color: #0261bc;
      }
    }
  }
}
</style>
